<template>
  <el-dialog
    title="订单明细"
    :visible.sync="dialogVisible"
    width="50%"
    class="common-dialog"
  >
    <el-form
      label-width="110px"
      label-suffix="："
      v-loading="loading"
    >
      <el-form-item label="起点">{{detailData.start}}</el-form-item>
      <el-form-item label="终点">{{detailData.end}}</el-form-item>
      <el-form-item label="开始出发时间">{{detailData.begin_time}}</el-form-item>
      <el-form-item label="点击结算时间">{{detailData.end_time}}</el-form-item>
      <el-form-item label="订单来源">{{detailData.from}}</el-form-item>
      <el-form-item label="订单状态">{{detailData.state_text}}</el-form-item>
      <el-form-item label="订单价格">{{ detailData.money }}</el-form-item>
      <el-form-item label="行驶里程">{{ detailData.distance }}</el-form-item>
      <el-form-item label="里程费用">{{ detailData.far_money }}</el-form-item>
      <el-form-item label="等待时长">{{ detailData.wait_time }}</el-form-item>
      <el-form-item label="远途费用">{{ detailData.far_money}}</el-form-item>
      <el-form-item label="优惠券">{{ detailData.ticket_money }}</el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button
        size="small"
        type="primary"
        @click="dialogVisible = false"
      >
        关 闭
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
  /**
   * @Author: lifuzhao
   * @Date: 2019-07-28
   * @Project: driver
   */
  import {mapState} from 'vuex'
  import {orderStatus} from '../../../constant/index'

  export default {
    name: "detail"
    , data() {
      return {
        dialogVisible: false
        , order: {}
      }
    }
    , computed: {
      ...mapState([
        'orderDetailData'
      ])
      , detailData() {
        let orderDetailData = this.orderDetailData
          , order = this.order
        return orderDetailData[order.id] || {}
      }
      , loading() {
        let detailData = this.detailData
        return detailData.loading
      }
    }
    , watch: {
      dialogVisible(bool) {
        this.$fn.setTitle(bool ? '订单明细' : '订单记录')
      }
    }
    , mounted() {
      this.init()
    }
    , methods: {
      init() {
        this.$bus.$on('viewOrderDetail', order => {
          this.dialogVisible = true
          this.order = order
          this.getOrderDetail()
        })
      }
      , getOrderDetail() {
        let order = this.order
          , detailData = this.detailData
        this.updateDetailData(order, {
          loading: Object.keys(detailData).length === 0
          , ...detailData
        })
        clearTimeout(this.timer)
        this.timer = setTimeout(() => {
          this.$axios.get('/api/v1/order/info', {
            params: {
              id: order.id
            }
          })
            .then(res => {
              for (let i = 0; i < orderStatus.length; i++) {
                if (orderStatus[i].value === res.state) {
                  res.state_text = orderStatus[i].label
                  break
                }
              }

              this.updateDetailData(order, res)
            })
            .catch(() => {
              this.$alert('获取订单明细失败', '失败提示')
            })
        }, 300)

      }
      , updateDetailData(order, data) {
        let orderDetailData = this.$fn.deepClone(this.orderDetailData)
        orderDetailData[order.id] = data
        this.$store.commit('setOrderDetailData', orderDetailData)
      }
    }
  }
</script>

<style scoped>

</style>
